<i18n>
{
  "en": {
    "page_title": "User Management",

    "unrelease": "Unrelease",
    "released": "Released",
    "all": "All",

    "headquarter": "Headquarter",
    "district": "District",
    "view": "View",
    "maintain": "Maintain",
    "move": "Move",
    "import": "Import",
    "optional_import": "Optional Import",
    "reuse": "Select Resue",
    "batch_publish": "Batch Publish",

    "col_internal_model": "Internal Model",
    "col_external_model": "External model",
    "col_main_model": "Main model",
    "col_product_name": "Product Name",
    "col_product_state": "Product State",
    "col_district_product_state": "District product state",
    "col_recommand_level": "Recommand level",
    "col_headquarter_promotion": "Headquarter Promotion",
    "col_promotion": "Promotion",
    "col_warranty": "Warranty",
    "col_district_release_state": "Release State",
    "col_headquarter_products_detail": "Headquarter products detail",
    "col_update_by": "Update User",

    "col_official_model": "Official Website model",
    "col_product_line": "Product line",
    "col_release_state": "Release State",
    "col_recommand": "Recommand(Y/N)",
    "col_official_website": "Official Website",
    "col_district_model": "District model"

  },
  "zh": {
    "page_title": "用户管理",

    "unrelease": "待维护",
    "released": "已发布",
    "all": "所有",

    "headquarter": "总部",
    "district": "区域",
    "view": "查看",
    "maintain": "维护",
    "move": "移动",
    "import": "批量导入",
    "optional_import": "选配导入",
    "reuse": "选择复用",
    "batch_publish": "批量发布",

    "col_internal_model": "内部型号",
    "col_external_model": "外部型号",
    "col_Catalog": "目录",
    "col_main_model": "主型号",
    "col_product_name": "产品名称",
    "col_product_state": "产品状态",
    "col_district_product_state": "区域产品状态",
    "col_recommand_level": "产品星级别",
    "col_headquarter_promotion": "总部促销",
    "col_promotion": "是否促销",
    "col_warranty": "库存",
    "col_district_release_state": "区域发布状态",
    "col_headquarter_products_detail": "总部发布详情",
    "col_update_by": "操作者",

    "col_official_model": "官网model",
    "col_product_line": "所属产品线",
    "col_release_state": "发布状态",
    "col_recommand": "推荐产品",
    "col_official_website": "官网显示",
    "col_district_model": "所属区域"
  }
}
</i18n>

<template>
  <el-container>
      <el-aside width="35%">
        <el-card>
          <el-form class="reuse-form" label-position="top" :model="reuseForm">
            <el-form-item :prop="group.code" v-for="group in reuseItems" :key="group.code">
              <CheckboxGroup  :groupName="group.name" :List="group.list" v-model="reuseForm[group.code]"/>
            </el-form-item>
          </el-form>
        </el-card>
      </el-aside>
      <el-main class="pt0 pr0">
        <el-card class="table-container" v-loading="dataListLoading">

          <el-form :inline="true" :model="searchForm" class="search-form">
            <el-row :gutter="30">

              <el-col :xs="24" :sm="12" :md="12" :lg="12">
                <el-form-item prop="keyword">
                  <el-input @keydown.native.13="getDataList" v-model.trim="searchForm.keyword" placeholder="搜索主型号/内部型号/外部型号-注：全产品库搜索">
                    <i slot="suffix" class="el-input__icon el-icon-search" @click="getDataList()"></i>
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :xs="24" :sm="12" :md="12" :lg="12">
                <el-form-item prop="status" label="产品状态">
                  <el-select @change="getDataList" v-loading="productStatusTypesLoading"
                  v-model="searchForm.status" placeholder="产品状态">
                    <el-option v-for="item in productStatusTypes" :label="item.paramValue" :value="item.paramKey" :key="item.paramKey"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

            </el-row>

          </el-form>

          <el-table :data="dataList" style="width: 100%">
            <el-table-column
              type="selection"
              width="55" label-class-name="text-center" class-name="text-center">
            </el-table-column>

              <el-table-column prop="inmodel" :label="'内部型号'">
              </el-table-column>

              <el-table-column prop="outmodel" :label="$t('col_external_model')">
              </el-table-column>

              <el-table-column prop="prodName" :label="$t('col_product_name')">
              </el-table-column>

              <el-table-column prop="productDirectoryName" :label="'目录'">
              </el-table-column>

              <el-table-column prop="salesStatus" :label="'销售状态'">
              </el-table-column>

              <el-table-column prop="releaseStatus" :label="'发布状态'">
              </el-table-column>

            </el-table>
            <el-pagination
              :current-page="currentPage"
              :page-size="pageSize" layout="total, prev, pager, next, jumper"
              :total="totalPage"
              @current-change="onCurrentChange">
            </el-pagination>
          </el-card>
      </el-main>

    </el-container>
</template>

<script>
  import { TYPE, getTypeList } from '@/api/common'
  import CheckboxGroup from '@/components/checkboxGroup'
  let reuseItems = [
      {
        code: 'basic',
        name: '基本信息',
        order: 1,
        list: [
          {code: '001', name: '外部型号', order: 1, selected: true},
          {code: '002', name: '外号', order: 1, selected: true}
        ]
      },
      {
        code: 'doc',
        name: '文档信息',
        order: 1,
        list: [
          {code: '001', name: 'gap', order: 1, selected: true}
        ]
      },
      {
        code: 'pic',
        name: '片',
        order: 1,
        list: [
          {code: '001', name: '片', order: 1, selected: true}
        ]
      }
    ]


  export default {
    data() {
      return {
        reuseItems: reuseItems,

        searchForm: {
          keyword: '',
          status: ''
        },
        // 复用表单
        reuseForm: {

        },

        dataList: [],

        // 产品状态列表
        productStatusTypesLoading: false,
        productStatusTypes: [],

        // 表格加载状态
        dataListLoading: false,
        // 表格数据
        dataList: [],
        currentPage: 1,
        pageSize: 10,
        totalPage: 0,
      };
    },
    components: {
      CheckboxGroup
    },
    created() {
      this.getProductDataList()
      this.getDataList()
    },
    computed: {

    },
    methods: {
      // 获取产品状态列表
      getProductDataList () {
        this.productStatusTypesLoading = true

        getTypeList(TYPE.PRODUCT_STATUS_TYPE).then((data) => {
          if (data && data.code === 0) {
            this.productStatusTypes = data.cpqSystemConfig
          } else {
            this.productStatusTypes = []
          }
          this.productStatusTypesLoading = false
        }).catch(error => {
          this.productStatusTypesLoading = false
        })
      },
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true

        this.$http({
          url: this.$http.adornUrl('/prm-os-srv-sys/product/productinformation/queryProductInformationListZb'),
          method: 'post',
          data: this.$http.adornParams({
            ...this.searchForm,
            productDirectoryId: this.$route.query.productDirectoryId,
            'pageNo': this.currentPage - 1,
            'pageSize': this.pageSize,
          })
        }).then((data) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      /**
       * 每页显示条数改变
       */
      onSizeChange (pageSize) {
        this.currentPage = 1
        this.pageSize = pageSize
        this.getDataList()
      },
      /**
       * 当前页码改变
       */
      onCurrentChange (currentPage) {
        this.currentPage = currentPage
        this.getDataList()
      },
    }
  }
</script>

<style scoped>
  .search-form {
    padding: 20px 15px 0;
  }

  .search-form >>> .el-form-item__label {
    white-space: nowrap;
  }

  .search-form >>> .el-form-item {
    display: flex;
    width: 100%;
  }

  .el-form-item >>> .el-form-item__content {
     width: 100%;
  }
  .el-form-item >>> .el-select {
    width: 100%;
  }

   .pr0 {
    padding-right: 0;
  }
  .pt0 {
    padding-top: 0;
  }

</style>
